<template>
  <div class="wrap">
    <div class="left">
      <header>
        <h3>￥589.65</h3>
        <p>账户余额</p>
        <el-button type="primary">充值</el-button>
        <el-button type="primary">面单打印记录</el-button>
      </header>
      <div class="bottom">
        <div class="search">
          <el-input></el-input>
          <el-button type="primary">搜索</el-button>
        </div>
        <el-date-picker v-model="date" class="time" type="date" placeholder="选择日期"></el-date-picker>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="全部客户" name="1">
            <div class="item" v-for="(item,index) in CustomerList" :key="index">
              <div>
                <img :src="item.customer_avatar" alt :onerror="defaultImg" />
                <p>{{item.customer_name}}</p>
              </div>
               <p>订单数： {{item.customer_order_count}}</p>
            </div>
         <!--    <div class="item">
              <div>
                <img src alt :onerror="defaultImg" />
                <p>乔治马丁</p>
              </div>
              <p>订单数： {{item.supplier_order_count}}</p>
            </div> -->
          </el-collapse-item>
          <el-collapse-item title="代发货客户" name="2">
            <div
              class="item"
              v-for="(item,idx) in daifahuo"
              :key="idx"
              @click="infos(item.account)"
            >
              <div>
                <img :src="item.avatar" alt :onerror="defaultImg" />
                <p>{{item.username}}</p>
              </div>
              <p>订单数： {{item.total}}</p>
            </div>
          </el-collapse-item>
          <el-collapse-item title="已发货客户" name="3">
            <div class="item">
              <div>
                <img src alt :onerror="defaultImg" />
                <p>乔治马丁</p>
              </div>
              <p>订单数： 10</p>
            </div>
            <div class="item">
              <div>
                <img src alt :onerror="defaultImg" />
                <p>乔治马丁</p>
              </div>
              <p>订单数： 10</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="content">
      <template v-if="state!=0">
        <div class="top">
          <el-checkbox label="全选"></el-checkbox>
          <el-button type="primary">批量打单</el-button>
        </div>
        <div class="top2">
          <el-checkbox></el-checkbox>
          <div class="center">
            <div class="info">
              <p>待发货</p>
              <div class="address">
                <div class="tg">
                  <img src="../assets/mins.png" alt />
                  <div>
                    <p>大白：18841685315</p>
                    <span>
                      辽宁省-沈阳市-皇姑区
                      沈大路97号3-3-4
                    </span>
                    <i>修改</i>
                  </div>
                </div>
                <img src="../assets/zh.png" class="zh" alt />
                <div class="tg">
                  <img src="../assets/minj.png" alt />
                  <div>
                    <p>大白：18841685315</p>
                    <span>
                      辽宁省-沈阳市-皇姑区
                      沈大路97号3-3-4
                    </span>
                    <i>修改</i>
                  </div>
                </div>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <img src :onerror="defaultImg2" alt />
                <p>规格：42</p>
                <p>价格：200</p>
                <p>订单日期：2020-04-25</p>
              </div>
              <div class="item">
                <img src :onerror="defaultImg2" alt />
                <p>规格：42</p>
                <p>价格：200</p>
                <p>订单日期：2020-04-25</p>
              </div>
              <div class="item">
                <img src :onerror="defaultImg2" alt />
                <p>规格：42</p>
                <p>价格：200</p>
                <p>订单日期：2020-04-25</p>
              </div>
            </div>
            <div class="btn">
              <el-button type="primary">打印面单</el-button>
            </div>
          </div>
        </div>
        <div class="top2">
          <el-checkbox></el-checkbox>
          <div class="center">
            <div class="info">
              <p>中通快递：123456789</p>
              <div class="address">
                <div class="tg">
                  <img src="../assets/mins.png" alt />
                  <div>
                    <p>大白：18841685315</p>
                    <span>
                      辽宁省-沈阳市-皇姑区
                      沈大路97号3-3-4
                    </span>
                    <i>修改</i>
                  </div>
                </div>
                <img src="../assets/zh.png" class="zh" alt />
                <div class="tg">
                  <img src="../assets/minj.png" alt />
                  <div>
                    <p>大白：18841685315</p>
                    <span>
                      辽宁省-沈阳市-皇姑区
                      沈大路97号3-3-4
                    </span>
                    <i>修改</i>
                  </div>
                </div>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <img src :onerror="defaultImg2" alt />
                <p>规格：42</p>
                <p>价格：200</p>
                <p>订单日期：2020-04-25</p>
              </div>
              <div class="item">
                <img src :onerror="defaultImg2" alt />
                <p>规格：42</p>
                <p>价格：200</p>
                <p>订单日期：2020-04-25</p>
              </div>
              <div class="item">
                <img src :onerror="defaultImg2" alt />
                <p>规格：42</p>
                <p>价格：200</p>
                <p>订单日期：2020-04-25</p>
              </div>
            </div>
            <div class="btn">
              <el-button type="primary">打印面单</el-button>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  background: #e5e5e5;
  display: flex;
}
.left {
  width: 300px;
  height: 800px;
  header {
    width: 100%;
    height: 180px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    h3 {
      color: red;
      text-align: center;
    }
    .el-button {
      width: 120px;
      display: block;
      padding: 0;
      margin: 15px 0 0;
      height: 40px;
    }
  }
  .bottom {
    background: #fff;
    height: 605px;
    width: 100%;
    overflow: hidden;
    .search {
      display: flex;
      margin-top: 10px;
      .el-input {
        margin: 0 10px;
      }
      .el-button {
        margin-right: 10px;
      }
    }
    .time {
      width: 280px;
      margin: 10px auto;
      display: block;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
      margin-bottom: 15px;
      div {
        display: flex;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: block;
          margin-right: 15px;
        }
        p {
          color: #555;
          font-size: 18px;
        }
      }
      p {
        color: #ccc;
        margin-right: 15px;
        font-size: 14px;
      }
    }
  }
}
.content {
  width: 1030px;
  background: #fff;
  height: 740px;
  margin-left: 10px;
  padding: 30px;
  .top {
    margin-bottom: 30px;
    .el-button {
      margin: 0 0 0 15px;
      padding: 0;
      width: 100px;
      height: 30px;
    }
  }
  .top2 {
    display: flex;
    margin-bottom: 15px;
    .center {
      width: 900px;
      border: 1px solid #409eff;
      border-radius: 8px;
      min-height: 200px;
      margin-left: 60px;
      padding-bottom: 10px;
      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 15px;
        margin-bottom: 15px;
        p {
          color: #555;
          font-size: 16px;
        }
      }
      .address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tg {
          border: 1px solid #e5e5e5;
          border-radius: 4px;
          display: flex;
          align-items: center;
          min-height: 0;
          padding: 5px 5px 5px 0;
          width: 200px;
          div {
            p {
              color: #555;
              font-size: 12px;
              text-align: left;
            }
            span {
              color: #999;
              font-size: 12px;
              text-align: left;
              display: block;
            }
            i {
              color: #3fd9c9;
              font-style: normal;
              text-align: left;
              display: block;
              font-size: 12px;
              cursor: pointer;
            }
          }
          img {
            width: 20px;
            height: 20px;
            display: block;
            border-radius: 50%;
            margin-left: 8px;
            margin-right: 8px;
          }
        }
        .zh {
          display: block;
          width: 20px;
          height: 20px;
        }
      }
      .list {
        margin-left: 30px;
        height: 155px;
        overflow-y: scroll;
        .item {
          display: flex;
          height: 60px;
          align-items: center;

          img {
            width: 40px;
            height: 40px;
            display: block;
            margin-right: 160px;
          }
          p {
            color: #555;
            font-size: 16px;
            width: 200px;
          }
        }
      }
      .btn {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
        margin-right: 30px;
      }
    }
  }
}
</style>

<script>
import { getProxyCustomerList, getProxyOrderList} from "../utils/interface";
export default {
  data() {
    return {
      date: "",
      activeNames: ["1"],
      defaultImg: 'this.src="' + require("../assets/person.png") + '"',
      defaultImg2: 'this.src="' + require("../assets/timg.jpg") + '"',
      daifahuo: [],
      darfahuoInfos: [],
      state: 0,
      CustomerList:[]
    };
  },
  methods: {
    getProxyCustomerList() {
      getProxyCustomerList().then(res => {
        this.daifahuo = res.data.data;
      });
    },
    getProxyOrderList(account) {
      getProxyOrderList({ account }).then(res => {
        console.log(res.data.data);
        if (res.data.data.length) {
          this.state = 1
          this.darfahuoInfos = res.data.data;
        }
      });
    },
    //   代发客户订单详情
    infos(e) {
      this.getProxyOrderList(e);
    },

    // getList(){
    //    getCustomerList({
    //     account: this.phone,
    //     password: this.password,
    //     checkCode: this.checkCode
    //   }).then(res => {
    //    console.log(res);
    //    this.CustomerList = res.data.data
    //   });
    // }
  },
  created() {
    this.getProxyCustomerList();
     this.getList()
  }
};
</script>